<div style="width:95%;padding:5px;">
	<div class="header">
		Response case builder
	</div>
	<div class="container">
		<span class="inputLabel">Condition</span>
		<input id="configCondition" style="width:70%" />
		<span class="clickable">check</span>
		<br />
        <span class="inputLabel">Description</span>
		<input id="configDescription" style="width:70%" />
        <br />
		<span class="inputLabel" style="padding-top:10px">&nbsp;</span>
		<span class="button" onclick="loadConfig(0)">Add static response</span>
		<span class="button" onclick="loadConfig(1)">Add datasource response</span>
		<span class="button" onclick="loadConfig(2)">Add routing response</span>
		<br />
		<div id="responseConfigArea" style="padding-top:20px;"></div>
		<br />
		<br />
		<span class="inputLabel" style="padding-top:10px">&nbsp;</span>
		<span class="button" onclick="testConfiguration()">Test configuration</span>
		<span class="button" onclick="saveConfiguration()">Save configuration</span>
		<span class="button" onclick="cancelConfiguration()">Cancel configuration</span>
	</div>
</div>
<script>

    focus("configCondition");
    
	function loadConfig(type) {
		switch(type) {
			case 0 :
				loadId('responseConfigArea', 'project/static');
				break;
			case 1 :
				loadId('responseConfigArea', 'project/dynamic');
				break;
			case 2 :
				loadId('responseConfigArea', 'project/routed');
				break;
			default :
				break;
		}
	
		configuredResponseType = type;

	}

    function saveConfiguration() {
        var condition  = $("#configCondition").val();
        var description  = $("#configDescription").val();
        var jsonConfig = getConfiguration();
        var configType = getType();
        addEndpointConfiguration({"condition":condition, "description":description,"configType":configType, "jsonConfig":jsonConfig});
    }

    configuredResponseType = null;
	function testConfiguration() {
		alert('Please select one response type');
	}
</script>